import React, { Fragment } from 'react'
import { useRecoilState } from 'recoil'
import { designerState } from '../../../../../store'
import { Tabs, Form, Radio, Switch } from 'antd'
import { produce } from 'immer';
import MetaWrapper from '../../../../dnd/MetaWrapper'

const { TabPane } = Tabs;

interface IProps {
  children?: any;
}

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 }
}

export default function CalendarConfig (props: IProps) {
  const [selectedNode, setSelectedNode] = useRecoilState(designerState.selectedNodeAtom);

   // 更新选中节点
   const updateAttr = (key: string, value: any) => {
    const newItem = produce(selectedNode, (draft: any) => {
      draft.config.attr[key] = value
    })
    setSelectedNode(newItem)
  }

  // 模式
  const changeMode = (e: any) => {
    updateAttr("mode", e.target.value)
  };

  // 是否全屏
  // const changeFullscreen = (value: any) => {
  //   updateAttr("fuulscreen", value)
  // };

  return (
    <Fragment>
      <Tabs defaultActiveKey="2">
        <TabPane tab='元数据' key="1">
          <MetaWrapper />
        </TabPane>
        <TabPane tab='设置' key="2">
          <Form
            // ref={this.form}
            {...layout}
            // onFinish={ onFinish }
            // initialValues={{ username: '小花狗不见了', prefix: '猜猜我是谁' }}
          >
            {/* <Form.Item label='是否全屏'>
              <Switch
                checked={ selectedNode.config?.attr.fullscreen }
                onChange={ changeFullscreen }
                checkedChildren={"开"}
                unCheckedChildren={"关"}
              />
            </Form.Item> */}
            <Form.Item label='模式'>
              <Radio.Group 
                defaultValue={ selectedNode.config?.attr.mode }
                value={ selectedNode.config?.attr.mode }
                onChange={ changeMode }
              >
                <Radio.Button value='year'>年份</Radio.Button>
                <Radio.Button value='month'>月份</Radio.Button>
              </Radio.Group>
            </Form.Item>
            {/* <Form.Item label='主题'>
              <Radio.Group 
                defaultValue={ selectedNode.config?.attr.theme }
                value={ selectedNode.config?.attr.theme }
                onChange={ changeTheme }
              >
                <Radio.Button value='light'>高亮</Radio.Button>
                <Radio.Button value='dark'>暗黑</Radio.Button>
              </Radio.Group>
            </Form.Item> */}
          </Form>
        </TabPane>
        <TabPane tab='数据' key="3">
          数据内容
        </TabPane>
      </Tabs>
    </Fragment>
  )
}